<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			::-webkit-scrollbar {
				display: none;
			}

			html,
			body {
				height: 100%;
			}

			.el-container,
			.el-main {
				overflow-y: scroll;
				scrollbar-color: transparent transparent;
				scrollbar-track-color: transparent;
				height: 100%;
			}

			.el-header {
				background-color: white;
				color: black;
				text-align: center;
				font-size: 25px;
				line-height: 60px;
				border-radius: 5px;
				//border:3px solid;
			}
		</style>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
		<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js"></script>
	</head>
	<body>
		<el-container id="app">
			<!-- 标题栏 -->
			<el-header height="100px">
				<el-row>
					<el-col :span="20" :offset="2"><img src="https://www.woniuxy.cn/static/page/icon/logo-woniuchuangxiang.svg" style="height: 75px;width: 300px "/></el-col>
					<el-col :span="2">
						<el-dropdown @command="headCommand">
							<span style="font-size:25px;color:black;cursor:pointer;">
								<i class="el-icon-user-solid"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item style="font-size:18px;" command="#">{{account}}</el-dropdown-item>
								<el-dropdown-item v-if="!account" style="font-size:18px;" command="login">登录</el-dropdown-item>
								<el-dropdown-item v-if="!account" style="font-size:18px;" command="register">注册</el-dropdown-item>
								<el-dropdown-item v-if="account" style="font-size:18px;" command="logout">注销</el-dropdown-item>
								<el-dropdown-item v-if="account" style="font-size:18px;" command="myOrder">我的订单</el-dropdown-item>
								<el-dropdown-item v-if="account" style="font-size:18px;" command="myParticipator">我的参拍</el-dropdown-item>
								<el-dropdown-item  style="font-size:18px;" command="product">商品</el-dropdown-item>
								<el-dropdown-item v-if="account" style="font-size:18px;" command="addProduct">创建商品</el-dropdown-item>
								<el-dropdown-item v-if="account" style="font-size:18px;" command="showProduct">我的商品</el-dropdown-item>
								<el-dropdown-item v-if="account" style="font-size:18px;" command="createAuction">创建竞拍场次</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-col>
				</el-row>
				<hr>
			</el-header>
			<el-main>
				<!-- 顶部导航 -->
			<!--<el-menu mode="horizontal" unique-opened="true" style="margin-top:-20px;">
					<el-submenu index="1">
						<template slot="title">
							<span style="font-size:18px;">模块A</span>
						</template>
						<el-menu-item style="font-size:16px;" @click="openWork('/open/work1');">子模块A</el-menu-item>
						<el-menu-item style="font-size:16px;" @click="openWork('/open/work2');">子模块B</el-menu-item>
						<el-menu-item style="font-size:16px;" @click="openWork('/open/work3');">子模块C</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title">
							<span style="font-size:18px;">模块B</span>
						</template>
						<el-menu-item style="font-size:16px;" @click="">子模块A</el-menu-item>
						<el-menu-item style="font-size:16px;" @click="">子模块B</el-menu-item>
						<el-menu-item style="font-size:16px;" @click="">子模块C</el-menu-item>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title">
							<span style="font-size:18px;">模块C</span>
						</template>
						<el-menu-item style="font-size:16px;" @click="">子模块A</el-menu-item>
						<el-menu-item style="font-size:16px;" @click="">子模块B</el-menu-item>
						<el-menu-item style="font-size:16px;" @click="">子模块C</el-menu-item>
					</el-submenu>
				</el-menu>-->
				<!-- 工作区 -->
				<div v-html="work" style="height:95%;margin-top:-30px;margin-right:-40px;"></div>
			</el-main>
		</el-container>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					work: "<iframe frameborder=0 width=100% height=100% src='/open/roundView'></iframe>",
					account:"",
					roundId:'',
					startPrice:'',
					keyword:""
				},
				methods: {
					//openWork
					openWork: function(work) {
						this.work = "<iframe frameborder=0 width=100% height=100% src='" + work + "'></iframe>";
					}
					,
					headCommand(command){

						if (command==="login") {
							location='/toLogin';
						}
						else if(command==="register"){
							location='/toRegister';
						}else if (command==="myOrder"){
							app.openWork('/open/myOrder');

						}else if (command==="myParticipator"){
							app.openWork('/open/myParticipator');

						}else if (command==="product"){
							app.openWork('/open/product');

						}else if (command==="addProduct"){
							app.openWork('/open/addProduct');
						}else if (command==="showProduct"){
							app.openWork('/open/showProduct');
						}else if (command==="createAuction"){
							app.openWork('/open/createAuction');
						}else {
							var cookies = document.cookie.split(";");
							for (var i = 0; i < cookies.length; i++) {
								var cookie = cookies[i];
								var eqPos = cookie.indexOf("=");
								var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
								document.cookie =
										name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
							}
							if (cookies.length > 0) {
								for (var i = 0; i < cookies.length; i++) {
									var cookie = cookies[i];
									var eqPos = cookie.indexOf("=");
									var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
									var domain = location.host.substr(location.host.indexOf("."));
									document.cookie =
											name +
											"=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" +
											domain;
								}
							}
							location.href="/";
						}


            },
            checkLogin() {
                let _this = this;
                $.post("/user/checkLogin", function (d) {
                    console.log(d)
                    if (d === "delete") {
                        location.href = "/"
                    } else if (d === "logout") {
                        var cookies = document.cookie.split(";");
                        for (var i = 0; i < cookies.length; i++) {
                            var cookie = cookies[i];
                            var eqPos = cookie.indexOf("=");
                            var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                            document.cookie =
                                name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
                        }
                        if (cookies.length > 0) {
                            for (var i = 0; i < cookies.length; i++) {
                                var cookie = cookies[i];
                                var eqPos = cookie.indexOf("=");
                                var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                                var domain = location.host.substr(location.host.indexOf("."));
                                document.cookie =
                                    name +
                                    "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" +
                                    domain;
                            }
                        }
                    } else {
                        _this.account = $.cookie("account") ;
                    }
                })
            }
        }

        ,
        created() {
            this.checkLogin();
        }
    })

</script>
</body>
</html>
